<!--删除功能 父子传值-->
<!--为了避免body中的内容庞大难以维护-->
<!--https://cn.vuejs.org/v2/api/#vm-emit-->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>simple</title>
  <script src="./vue.js"></script>
</head>
<body>
  <div id="app">
    <div>
      <input v-model="inputValue">
      <button @click="handleSubmit">提交</button>
    </div>

    <!--todos是父组件数据, 父=>子，子需要props显示接收-->
    <todo-item
      v-for="(item,index) in todos"
      :index="index"
      :content="item"
      @delete="handleDelete"
    >

    </todo-item>
  </div>

  <script>
    // 全局组件
    Vue.component('todo-item', {
      props: ['content', 'index'],
      template: '<li @click="handleClick">{{content}}</li>',
      methods: {
        handleClick: function() {
          // 子=>父，子自定义事件，
          this.$emit('delete', this.index)
        }
      }
    })

    new Vue({
      el: '#app',
      name: 'app',
      // components: {
      //   todoItem: todoItem
      // },
      // template: {}, // 根 组件的模板就是挂载点下包括的东西
      data: {
        inputValue: '',
        todos: ['起床', '吃饭', 'lol'],
      },
      methods: {
        handleSubmit: function (){
          this.todos.push(this.inputValue)
          this.inputValue = ''
        },
        // 梳理下子触发父的流程
        // 1. 子<li > onclick触发子组件handleClick方法
        // 2. 父组件渲染子组件时 已监听delete事件，等待触发自己的相关业务功能方法。
        // 3. handleClick 触发emit  delete 将上面两个事件联系起来
        handleDelete: function(index) {
          this.todos.splice(index, 1)
        }
      }
    })
  </script>

</body>
</html>